<template>
	<view v-if="visible" class="message-toast" :class="{ 'slide-in': animateIn, 'slide-out': animateOut }">
		<view class="toast-content" @tap="handleClick">
			<!-- 头像 -->
			<view class="avatar">
				<image v-if="message.avatar" :src="message.avatar" class="avatar-img" />
				<text v-else class="avatar-text">{{ getAvatarText(message.fromUser) }}</text>
			</view>
			
			<!-- 消息内容 -->
			<view class="message-info">
				<view class="sender-name">{{ message.fromUser || '系统消息' }}</view>
				<view class="message-content">{{ message.content }}</view>
			</view>
			
			<!-- 时间 -->
			<view class="message-time">{{ formatTime(message.sendTime) }}</view>
			
			<!-- 关闭按钮 -->
			<view class="close-btn" @tap.stop="handleClose">
				<uni-icons type="close" size="16" color="#999" />
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, watch, nextTick } from 'vue'
	
	// Props
	const props = defineProps({
		message: {
			type: Object,
			default: () => ({})
		},
		show: {
			type: Boolean,
			default: false
		},
		duration: {
			type: Number,
			default: 3000 // 3秒
		},
		clickable: {
			type: Boolean,
			default: true
		}
	})
	
	// Emits
	const emit = defineEmits(['close', 'click'])
	
	// 响应式数据
	const visible = ref(false)
	const animateIn = ref(false)
	const animateOut = ref(false)
	let timer = null
	
	// 监听show属性变化
	watch(() => props.show, (newVal) => {
		if (newVal) {
			showToast()
		} else {
			hideToast()
		}
	}, { immediate: true })
	
	// 显示弹框
	const showToast = async () => {
		visible.value = true
		animateOut.value = false
		
		await nextTick()
		animateIn.value = true
		
		// 设置自动隐藏定时器
		if (props.duration > 0) {
			timer = setTimeout(() => {
				hideToast()
			}, props.duration)
		}
	}
	
	// 隐藏弹框
	const hideToast = () => {
		animateIn.value = false
		animateOut.value = true
		
		// 清除定时器
		if (timer) {
			clearTimeout(timer)
			timer = null
		}
		
		// 动画结束后隐藏
		setTimeout(() => {
			visible.value = false
			animateOut.value = false
			emit('close')
		}, 300) // 动画持续时间
	}
	
	// 处理点击事件
	const handleClick = () => {
		if (props.clickable) {
			emit('click', props.message)
			hideToast()
		}
	}
	
	// 处理关闭按钮点击
	const handleClose = () => {
		hideToast()
	}
	
	// 获取头像文字
	const getAvatarText = (name) => {
		if (!name) return '系'
		return name.charAt(0).toUpperCase()
	}
	
	// 格式化时间
	const formatTime = (time) => {
		if (!time) return ''
		
		const now = new Date()
		const msgTime = new Date(time)
		const diff = now - msgTime
		
		// 小于1分钟显示"刚刚"
		if (diff < 60000) {
			return '刚刚'
		}
		
		// 小于1小时显示分钟
		if (diff < 3600000) {
			return `${Math.floor(diff / 60000)}分钟前`
		}
		
		// 小于24小时显示小时
		if (diff < 86400000) {
			return `${Math.floor(diff / 3600000)}小时前`
		}
		
		// 显示日期时间
		return msgTime.toLocaleString('zh-CN', {
			month: '2-digit',
			day: '2-digit',
			hour: '2-digit',
			minute: '2-digit'
		})
	}
</script>

<style scoped>
	.message-toast {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		background: rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(5px);
		padding-top: var(--status-bar-height);
		transform: translateY(-100%);
		transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}
	
	.message-toast.slide-in {
		transform: translateY(0);
	}
	
	.message-toast.slide-out {
		transform: translateY(-100%);
	}
	
	.toast-content {
		background: #fff;
		margin: 10rpx;
		border-radius: 16rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		position: relative;
	}
	
	.avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		flex-shrink: 0;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}
	
	.avatar-img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	
	.avatar-text {
		color: white;
		font-size: 24rpx;
		font-weight: bold;
	}
	
	.message-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
		min-width: 0;
	}
	
	.sender-name {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
		line-height: 1.2;
	}
	
	.message-content {
		font-size: 26rpx;
		color: #666;
		line-height: 1.3;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 100%;
	}
	
	.message-time {
		font-size: 20rpx;
		color: #999;
		margin-left: 10rpx;
		flex-shrink: 0;
	}
	
	.close-btn {
		position: absolute;
		top: 15rpx;
		right: 15rpx;
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: rgba(0, 0, 0, 0.05);
	}
	
	/* 适配不同主题 */
	@media (prefers-color-scheme: dark) {
		.toast-content {
			background: #2c2c2e;
		}
		
		.sender-name {
			color: #fff;
		}
		
		.message-content {
			color: #8e8e93;
		}
		
		.close-btn {
			background: rgba(255, 255, 255, 0.1);
		}
	}
	
	/* 添加轻微的弹跳效果 */
	@keyframes bounce {
		0% { transform: translateY(-100%); }
		60% { transform: translateY(10rpx); }
		80% { transform: translateY(-5rpx); }
		100% { transform: translateY(0); }
	}
	
	.message-toast.slide-in {
		animation: bounce 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}
</style>

